<template>
    <view class="register-container">
        <view class="row register-title">注册</view>
        <input placeholder="请输入用户名" v-model="name" class="row input-field" />
        <input placeholder="请输入邮箱" v-model="email" class="row input-field" />
        <div class="row code-input-wrapper">
            <input placeholder="请输入验证码" v-model="verifyCode" class="input-field input-field-code" />
            <button @tap="sendVerifyCode" :disabled="isSendingCode || countdown > 0" class="btn btn-code">
                {{ countdown > 0 ? countdown + 's 后重试' : '发送验证码' }}
            </button>
        </div>
        <input placeholder="请输入手机号" v-model="phone" class="row input-field" />
        <input placeholder="请输入 QQ" v-model="qq" class="row input-field" />
        <input placeholder="请输入密码" v-model="password" type="password" class="row input-field" />
        <input placeholder="请再次输入密码" v-model="confirmPassword" type="password" class="row input-field" />
        <button @tap="register" class="row btn btn-register">注册</button>
        <view class="row login-link" @tap="goToLogin">已有账号？去登录</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            email: '',
            phone: '',
            qq: '',
            password: '',
            confirmPassword: '',
            verifyCode: '',
            isSendingCode: false,
            countdown: 0
        };
    },
    methods: {
        sendVerifyCode() {
            if (!this.email) {
                uni.showToast({
                    title: '请输入邮箱',
                    icon: 'none'
                });
                return;
            }
            this.isSendingCode = true;
            uni.request({
                url: "https://api.xiaoyaoyou.hanfenga7.cn/api/v1/user/authEmail",
                dataType: "json",
                responseType: "json",
                method: "POST",
                data: {
                    "email": this.email
                },
                success: (res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '验证码已发送到邮箱',
                            icon: 'success'
                        });
                        this.startCountdown();
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'error'
                        });
                    }
                },
                complete: () => {
                    this.isSendingCode = false;
                }
            });
        },
        startCountdown() {
            this.countdown = 60;
            const interval = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(interval);
                }
            }, 1000);
        },
        register() {
            if (this.password === this.confirmPassword) {
                // 发送请求
                uni.request({
                    url: "https://api.xiaoyaoyou.hanfenga7.cn/api/v1/user/register",
                    dataType: "json",
                    responseType: "json",
                    method: "POST",
                    data: {
                        "email": this.email,
                        "name": this.name,
                        "password": this.password,
                        "phone": this.phone,
                        "qq": this.qq,
                        "verify_code": "257661"
                    },
                    success(res) {
                        // 判断接口的状态码
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '用户注册成功',
                                icon: 'success'
                            });
                            // 注册成功，等待 1s 跳转到登录页面
                            setTimeout(() => {
                                uni.redirectTo({
                                    url: '/pages/login/login'
                                });
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'error'
                            });
                        }
                    }
                });
            } else {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                });
            }
        },
        goToLogin() {
            uni.navigateTo({
                url: '/pages/login/login'
            });
        }
    }
};
</script>

<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

	.register-container {
		padding: 2rem;
		text-align: center;
		font-family: 'Inter', sans-serif;
		background-color: #f9fafb;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.register-title {
		font-size: 1.75rem;
		font-weight: 600;
		color: #1f2937;
		margin-bottom: 1.5rem;
	}

	/* 非验证码行的所有输入框样式 */
	.input-field {
		width: 270px;
		padding: 0.75rem 1rem;
		border: 1px solid #e5e7eb;
		border-radius: 0.5rem;
		transition: border-color 0.2s ease;
		color: #1f2937;
		font-size: 1rem;
		box-sizing: border-box;
		height: 48px;
	}

	.input-field:focus {
		border-color: #3b82f6;
		outline: none;
	}

	.code-input-wrapper {
		display: flex;
		width: 270px;
		gap: 0.75rem;
		align-items: stretch;
	}

	.input-field-code {
		flex: 2;
		height: auto;
		min-width: 0;
	}

	.row {
		margin-bottom: 1rem;
	}

	.btn {
		padding: 0;
		background-color: #3b82f6;
		color: white;
		border: none;
		border-radius: 0.75rem;
		box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.btn:hover {
		background-color: #2563eb;
		transform: translateY(-3px);
		box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4);
	}

	.btn:active {
		transform: translateY(0);
		box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
	}

	.btn:disabled {
		background-color: #cbd5e1;
		color: #94a3b8;
		cursor: not-allowed;
		box-shadow: none;
	}

	.btn-code {
		font-size: 0.9rem;
		flex: 1;
		min-width: 100px;
		white-space: nowrap;
		border-radius: 0.5rem;
	}

	/* 注册按钮样式 */
	.btn-register {
		max-width: 180px;
		margin-top: 0.5rem;
		/* 确保文字完美居中 */
		line-height: 1;
		padding: 0;
	}

	.login-link {
		color: #3b82f6;
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.login-link:hover {
		color: #2563eb;
	}
</style>
